<template>
  <div class="c-w100">
    <template v-if="mb == 3">
      <div class="c-flex-row c-pt24" v-for="(item,index) in itemList" :key="index" @click="clickTestPapertionItem(item.libraryId)">
        <div class="c-pb24">
          <div class="c-ww210 c-maxh210 c-text-hidden c-p c-br10 c-flex-shrink0">
            <img class="c-w100 c-br10" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
            <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
          </div>
        </div>
        <div class="c-flex-column c-ml20 c-flex-grow1 c-justify-sb c-pb24" :class="index == itemList.length-1 ? '' : 'c-bd-b1 '">
          <div class="c-fs24 c-lh36 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-end c-fs0">
            <div v-if="visible.priceVisible" class="theme-fc" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
              <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 129)}}
            </div>
            <div v-if="visible.dataVisible" class="c-lh">
              <span class="c-fs18 c-fc-gray c-lh">{{item.subscribers}}人参与</span>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="mb == 4">
      <div class="c-w100">
        <div class="c-flex-row c-flexw-wrap c-justify-sb c-pt24">
          <div class="c-flex-column c-ww288 c-pb24" v-for="(item,index) in itemList" :key="index" @click="clickTestPapertionItem(item.libraryId)">
            <div class="c-w100 c-maxh288 c-p c-br10 c-text-hidden">
              <img class="c-w100 c-block c-br10" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
            </div>
            <div class="c-fs24 c-text-ellipsis2 c-lh36 c-flex-row c-aligni-center c-mt16 c-ph10">{{item.name}}</div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10 c-fs0">
              <div v-if="visible.priceVisible" class="theme-fc" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 129)}}
              </div>
              <div v-if="visible.dataVisible" class="c-fs18 c-fc-gray c-lh">{{item.subscribers}}人参与</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="c-flex-row c-pt24" v-for="(item,index) in itemList" :key="index" @click="clickTestPapertionItem(item.libraryId)" v-if="itemType == 1">
        <div class="c-pb24">
          <div class="c-ww240 c-maxh240 c-text-hidden c-p c-br16 c-flex-shrink0">
            <img class="c-w100 c-br16" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
            <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
          </div>
        </div>
        <div class="c-flex-column c-ml20 c-flex-grow1 c-justify-sb c-pb24" :class="index == itemList.length-1 ? '' : 'c-bd-b1 '">
          <div class="c-fs24 c-lh36 c-text-ellipsis2 c-fc-xblack">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-end c-fs0">
            <div v-if="visible.priceVisible" class="theme-fc" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
              <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 129)}}
            </div>
            <div v-if="visible.dataVisible" class="c-lh">
              <span class="c-fs18 c-fc-gray c-lh">{{item.subscribers}}人参与</span>
            </div>
          </div>
        </div>
      </div>

      <div class="c-w100" v-if="itemType == 2">
        <div class="c-flex-row c-flexw-wrap c-justify-sb">
          <div class="c-flex-column c-ww284 c-pv20" v-for="(item,index) in itemList" :key="index" @click="clickTestPapertionItem(item.libraryId)">
            <div class="c-w100 c-maxh284 c-p c-br16 c-text-hidden">
              <img class="c-w100 c-block c-br16" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
            </div>
            <div class="c-fs24 c-text-ellipsis2 c-lh36 c-flex-row c-aligni-center c-mt16 c-ph10">{{item.name}}</div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10 c-fs0">
              <div v-if="visible.priceVisible" class="theme-fc" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 129)}}
              </div>
              <div v-if="visible.dataVisible" class="c-fs18 c-fc-gray c-lh">{{item.subscribers}}人参与</div>
            </div>
          </div>
        </div>
      </div>

      <div class="c-w100" v-if="itemType == 4">
        <div class="c-flex-column c-w100 c-pv20" v-for="(item,index) in itemList" :key="index" @click="clickTestPapertionItem(item.libraryId)">
          <div class="c-w100 c-maxh592 c-p c-br16 c-text-hidden">
            <img class="c-w100 c-block c-br16" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
            <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
          </div>
          <div class="c-fs24 c-text-ellipsis2 c-lh36 c-flex-row c-aligni-center c-mt16 c-ph10">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10 c-fs0">
            <div v-if="visible.priceVisible" class="theme-fc c-fw-b" :class="item.payType == 2 ? 'c-fs26' : 'c-fs24'">
              <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 129)}}
            </div>
            <div v-if="visible.dataVisible" class="c-fs18 c-fc-gray c-lh">{{item.subscribers}}人参与</div>
          </div>
        </div>
      </div>

      <div class="c-w100" v-if="itemType == 5">
        <div class="c-w100 c-contexty-hidden c-contextX-scroll c-ws-n c-pv20">
          <div class="c-inlineblack c-vcAlign-top c-ww260 c-mr20 c-bd1 c-br16 c-pb16 c-text-hidden" v-for="(item,index) in itemList" :key="index" @click="clickTestPapertionItem(item.libraryId)">
            <div class="c-w100 c-maxh260 c-text-hidden c-p">
              <img class="c-w100" :src="$addXossFilter(item.avatar, require('../../assets/examination_defult.png'))" @error="item.avatar = require('../../assets/examination_defult.png')" alt="" />
              <vip-status :item="item" v-if="visible.vipVisible"></vip-status>
            </div>
            <div class="c-fs24 c-text-ellipsis2 c-lh36 c-ws-bs c-mt16 c-ph10">{{item.name}}</div>
            <div class="c-flex-row c-justify-sb c-aligni-center c-mt10 c-ph10 c-fs0">
              <div v-if="visible.priceVisible" class="theme-fc" :class="item.payType == 2 ? 'c-fs24' : 'c-fs22'">
                <span v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, 129)}}
              </div>
              <div v-if="visible.dataVisible" class="c-fs18 c-fc-gray c-lh">{{item.subscribers}}人参与</div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="itemList.length >= 7 && showMore != 1" class="c-fs20 c-fc-sblack c-textAlign-c c-pv16" @click="clickMore">查看更多 <span class="icon iconfont">&#xe836;</span></div>
    </template>
  </div>
</template>

<script>
import { utilJs } from "@/utils/common.js"
import defultImg from '../../assets/examination_defult.png'
import vipStatus from '@/components/templates/common/vipStatus.vue'
export default {
  name: "ExaminationItem",
  components: {
    vipStatus
  },
  //props: ["item"],
  props: {
    mb: {
      type: Number,
      default: 1
    },
    item: {
      type: Object,
      default: null,
    },
    isFromM7: {
      type: Boolean,
      default: false
    },
    itemType: {
      type: Number,
      default: 1, //1一行一列，2一行两列，3一行三列
    },
    itemList: {
      type: Array,
      default: () => []
    },
    showCount: {
      type: Number,
      default: 1
    },
    showMore: {
      type: Number,
      default: 0,
    },
    visible:{
      type: Object,
      default: () => {
        return {
          priceVisible:true, // 价格、商品价格
          originalPriceVisible:true, // 划线价格
          dataVisible:true, // 商品数据、数据字段、数据
          statusVisible:true, // 状态
          forecastVisible:true, // 预告时间
          qrVisible:true, // 预告二维码
          vipVisible:true, // vip角标
        }
      },
    }
  },
  data() {
    return {
      noImg: defultImg,
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5'
    };
  },

  methods: {
    setIosText() {
      return this.$isWxAppIos() ? '已测' : '已售'
    },
    clickMore() {
      this.$emit('clickMore');
    },
    iosAppRouteChange(toPath) {
      if (utilJs.isIOSApp()) {
        window.webkit.messageHandlers.iosWechatRoute.postMessage(toPath);
      } else if (utilJs.isAndoridNewApp()) {
        let data = {
          path: toPath
        }
        window.androidWechatRoute.doAction(JSON.stringify(data))
      } else {
        this.$routerGo(this, "push", { path: toPath });
      }
    },
    clickTestPapertionItem(libraryId) {
      let toPath = `/homePage/itemBank/questionSaleDetail?libraryId=${libraryId}`;
      this.iosAppRouteChange(toPath);
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-pb2 {
  padding-bottom: 0.05rem;
}
</style>
